<template>
  <div class="goods-box2">
    <div class="search">
      <div>
        <el-input v-model="searchValue" maxlength="100" clearable style="width: 290px;" />
        <img src="../assets/img/search.png" @click="handleSearch" class="search-icon" />
      </div>
      <div style="color: #696969; font-size: 12px; margin-top: 10px;">
        热门搜索：
        <a class="tag-item" @click="handleTopicDetail('苹果')">苹果</a>
        <a class="tag-item" @click="handleTopicDetail('新疆哈密瓜')">新疆哈密瓜</a>
        <a class="tag-item" @click="handleTopicDetail('樱桃')">樱桃</a>
      </div>
    </div>
    <el-row :gutter="0" class="goods-container">
      <el-col :span="4" v-for="(item, index) in cgoods" :key="index">
        <el-card class="goods-card" shadow="hover" @click.native="detailsClick(item)">
          <img v-if="item.picture" :src="$store.state.imgShowRoad + '/file/' + item.picture" class="goods-img" alt="商品图片" />
          <img v-else :src="$store.state.imgShowRoad + '/file/' + 'wutu.gif'" class="goods-img" alt="无图" />
          <div class="info">
            <p class="content">
              <i style="color: #696969; font-size: 12px; font-style: normal;" v-if="item.type == 'goods'">[供]</i>
              <i style="color: #696969; font-size: 12px; font-style: normal;" v-else>[需]</i>
              <span class="content-text">{{ item.content }}</span>
            </p>
            <span class="price" v-if="item.price"><i style="font-size: 5px">￥</i>{{ item.price }}</span>
            <span class="initiator">{{ item.ownName }} | {{ item.createTime | formatTimer }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: ''
    };
  },
  filters: {
    formatTimer(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return `${y}-${MM}-${d} ${h}:${m}`;
    },
  },
  props: {
    cgoods: {
      type: Array,
    },
  },
  methods: {
    detailsClick(item) {
      this.$store.commit("updateOrderId", item.orderId);
      this.$router.push(`/home/details?orderId=${item.orderId}`).catch((err) => err);
    },
    handleSearch() {
      this.$emit('handleSearch', this.searchValue);
    },
    handleTopicDetail(val) {
      this.searchValue = val;
      this.handleSearch();
    }
  },
};
</script>

<style lang="less" scoped>
.search {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: white;
  padding: 15px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;

  .search-input-container {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .el-input {
    width: 100%;
    max-width: 350px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    padding: 10px;
  }

  .search-icon {
    cursor: pointer;
    margin-left: 10px;
    width: 25px;
    height: 25px;
  }

  .tag-item-container {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .tag-item {
    cursor: pointer;
    color: #666;
    font-size: 12px;
    padding: 5px 10px;
    background-color: #f1f1f1;
    border-radius: 15px;
    transition: all 0.3s ease;

    &:hover {
      color: #fff;
      background-color: #035d1c;
    }
  }
}

.goods-box2 {
  background-color: transparent;
  width: 125%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px;

  .goods-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 改为紧贴排列 */
    gap: 0; /* 去除多余的间距 */
  }

  .goods-card {
    width: 100%;
    height: 340px;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.3s ease;
    background-color: white;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .el-card__body {
      padding: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      height: 100%;
    }

    .goods-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 5px;
      margin-bottom: 10px;
    }

    .info {
      width: 100%;
      padding: 0 10px;
      flex-grow: 1;

      .initiator {
        color: #888;
        font-size: 12px;
      }

      .content {
        width: 100%;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14px;
        margin-bottom: 8px;

        .content-text {
          color: #333;
          font-weight: bold;
          &:hover {
            color: #035d1c;
            text-decoration: underline;
          }
        }
      }

      .price {
        font-size: 16px;
        font-weight: bold;
        color: #e53935;
        margin-top: 10px;
      }
    }
  }
}
</style>
